<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <div class="live_wrapper clearfix"
             style="margin-top: 10px">
          <Input v-model="filter.name"
                 @on-search="search"
                 search
                 enter-button="搜索"
                 placeholder="请输入会员姓名"
                 style="display:inline-table; width: 210px; float:left; " />
          <Input v-model="filter.phone"
                 @on-search="search"
                 search
                 enter-button="搜索"
                 placeholder="请输入会员手机号"
                 style="display:inline-table; width: 210px; float:left; margin-left:10px" />
          <DatePicker type="daterange"
                      v-model="created_at"
                      @on-change="search"
                      placement="bottom-end"
                      placeholder="选择注册时间"
                      style="float:left; width: 200px; margin-left: 10px;"></DatePicker>
          <Button type="primary"
                  @click.stop="exportData()"
                  style="float:left; width: 80px;height: 34px;font-size: 14px; margin-left: 10px">导出</Button>
        </div>
        <p class="admin_title">
          全部会员
        </p>
        <Row class="margin-top-10 table_pattern table_pattern2">
          <Table style="width: calc(100vw - 256px - 36px - 32px)"
                 :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
  </div>
</template>
<script>

import Time from '@/tool/Time'
import { getMemberList } from '@/api/main'
export default {
  data () {
    return {
      pagenation: {},
      columns: [
        {
          key: 'name',
          title: '会员姓名',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.name)
          },
        },
        {
          key: 'phone',
          title: '会员电话',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.phone)
          },
        },
        {
          key: 'invitation_name',
          title: '邀请人',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.invitation_name)
          },
        },
        {
          key: 'created_time',
          title: '注册时间',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
      ],
      list: [],
      loading: true,
      filter: {
        page: 0,
        page_size: 20,
        nickname: '',
        name: '',
        phone: '',
        created_range: '',
      },
      created_at: ['', '']
    }
  },
  watch: {
    'created_at': function () {
      let created_at_start = Time.dateToTimestamp(this.created_at[0])
      let created_at_end = Time.dateToTimestamp(this.created_at[1])
      if (created_at_start !== 0 && created_at_end !== 0) {
        this.filter.created_range = created_at_start + '-' + created_at_end
      } else {
        this.filter.created_range = ''
      }
    }
  },
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.init()
    },
    search: function () {
      this.filter.page = 0
      this.init()
    },
    init () {
      getMemberList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 500
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      getMemberList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            _this.export()
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['会员姓名', '会员手机号', '邀请人', '注册时间'];
            const filterVal = ['name', 'phone', 'invitation_name', 'created_time'];
            const data = _this.formatJson(filterVal, _this.export_list)
            export_json_to_excel(tHeader, data, '会员信息')
          }
        }
      })
    },
  },
  mounted () {
    this.init();
  }
}
</script>
<style>
.edui-notadd .edui-dialog {
	z-index: 2005 !important;
}
.edui-notadd {
	z-index: 2002 !important;
}
</style>
<style scoped lang="less">
/deep/ .edui-notadd .edui-dialog {
	z-index: 5000 !important;
}
/deep/ input::-webkit-input-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input::-moz-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input:-moz-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input:-ms-input-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
</style>
